<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>查看及编辑函数和脚本</title>
        <script src="/lib/axios.js"></script>
        <script src="/lib/vue.js"></script>
        <link rel="stylesheet" href="/lib/elementindex.css">
        <script src="/lib/elementindex.js"></script>
    </head>
    <body>
        <div id="app" style="width:100%">
            <el-tabs value='config'>
                <el-tab-pane label="基本信息" name="rbasic">
                    <hc-rule-basic :ruledef='ruleDef'></hc-rule-basic>
                </el-tab-pane>
                <el-tab-pane label="规则配置" name="config">
                    <el-form ref="form" label-width="auto">
                        <el-collapse v-model='activeNames'>
                            <el-collapse-item name="package">
                                <template slot="title">
                                    <span style="font-size:larger;font-weight: bold;">导入代码库</span>
                                </template>

                                <el-table :data="ruleDef.imports" style="width: 100%;margin-bottom: 20px;" border>
                                    <el-table-column label="代码库">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.code" placeholder='package name'></el-input>
                                        </template>
                                    </el-table-column>

                                    <el-table-column label="说明">
                                        <template slot-scope="scope">
                                            <el-input v-model.trim="scope.row.name" placeholder='需要的话可填写说明'>
                                                </el-checkbox>
                                        </template>
                                    </el-table-column>

                                    <!-- <el-table-column label="包括所有(*)">
                                        <template slot-scope="scope">
                                            <el-checkbox v-model.trim="scope.row.markAll">.*</el-checkbox>
                                        </template>
                                    </el-table-column>

                                    <el-table-column label="静态(static)">
                                        <template slot-scope="scope">
                                            <el-checkbox v-model.trim="scope.row.markStatic">static </el-checkbox>
                                        </template>
                                    </el-table-column> -->

                                    <el-table-column label="操作" min-width="100px">
                                        <template slot="header">
                                            <span>操作</span>
                                            <el-button size="mini" type="success" @click="handleTableRowCommand(ruleDef.imports,-1,0,{})">追加一行
                                            </el-button>
                                        </template>
                                        <template slot-scope="scope">
                                            <el-button size='mini' @click="handleTableRowCommand(ruleDef.imports,scope.$index,0,{})"
                                                placeholder="">干</el-button>
                                            <el-button size='mini' @click="handleTableRowCommand(ruleDef.imports,scope.$index+1,0,{})">士
                                            </el-button>
                                            <el-button size='mini' @click="handleTableRowCommand(ruleDef.imports,scope.$index,1)">X
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-collapse-item>

                            <el-collapse-item name="script">
                                <template slot="title">
                                    <span style="font-size:larger;font-weight: bold;">编写脚本</span>
                                </template>
                                <hc-groovy-editor v-model="ruleDef.script">
                                </hc-groovy-editor>
                            </el-collapse-item>
                            
                            <el-form-item label="">
                                <el-button type="primary" @click='handleUpdateRuleEvent'>保存修改</el-button>
                                &nbsp;&nbsp;
                                <el-button type="danger" @click='handleDeleteRuleEvent'>删除规则</el-button>
                            </el-form-item>
                    </el-form>
                </el-tab-pane>

                <el-tab-pane label="规则测试" name="test">
                    <hc-test :rpath="ruleDef.rpath" :inputs='ruleDef.rtest' @save-inputs="ruleDef.rtest = $event"></hc-test>
                </el-tab-pane>
            </el-tabs>

        </div>


        <script src="/lib/ace-noconflict/ace.js"></script>
        <script src="/lib/ace-noconflict/ext-language_tools.js"></script>
        <link rel="stylesheet" href="/com/hc-groovy-editor.css" />
        <link rel="stylesheet" href="/com/hc-lang-editor.css" />
        <script type='module'>
            import * as $util from '/lib/hc-util.js'
            import * as $rest from '/lib/hc-rest-service.js'
            import {} from '/com/hc-test.js'
            import {} from '/com/hc-rule-basic-properties.js'
            import {} from '/com/hc-groovy-editor.js'
            
            $rest.check$pinfoOrLoad(function() {
                $rest.obtainRuleDefByRpath($util.getUrlArgOrDefault('rpath', 'xsxdjc/script/MaxOfList'), function(ruleDef) {
                    window.vm = new Vue({
                        el: '#app',
                        data: {
                            activeNames: ['script'],  
                            ruleDef: ruleDef
                        },
                        methods: {
                            handleTableRowCommand: onTableRowCommand,
                            handleUpdateRuleEvent() {
                                $rest.updateRuleDefInVm(this)
                            },
                            handleDeleteRuleEvent() {
                                $rest.deleteRuleDefInVm(this)
                            }
                        }
                    });//end of new vm
                })
            }, 'xsxdjc/Main');

            function onTableRowCommand(table, start, deleted, newrow) {
                if (start == -1) start = table.length;
                if (newrow == undefined) {
                    table.splice(start, deleted);
                } else {
                    newrow.id = ++vm.ruleDef.rmaxid;
                    table.splice(start, deleted, newrow);
                }
            }
        </script>

    </body>

</html>
